<template>
    <div class="AlarmLog">
        <el-table
            height="84"
            :header-cell-style="{
                background:'rgb(2, 16, 51)',
                color:'aliceblue',
                border:'0px',
                'text-align':'center',
                padding:'0px 0px 0px 0px',
                'box-shadow': '0px 0px 30px  rgb(1, 40, 107) inset'}"
            :cell-style="{
                background:'rgb(2, 16, 51)',
                color:'aliceblue',
                border:'0px',
                'text-align':'center',
                padding:'0 0 0 0'}"
            :data="tableDataFn"
            style="width: 100%"
        >
            <el-table-column
                type="index"
                width="50">
            </el-table-column>
            <template v-for="(item) in tableColumns">
                <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    :key="item.prop"
                    align="center"
                >
                    <template v-slot="scope">
                        <template v-if="item.format == 'ALERT_LEVEL'">
                            <div style="text-align: center">
                                <el-tag
                                    :type="scope.row.levelType"
                                    disable-transitions
                                    size="mini"
                                    effect="dark">
                                    {{scope.row[item.prop]}}
                                </el-tag>
                            </div>
                        </template>
                        <template v-else>
                            <div>
                                {{ scope.row[item.prop] }}
                            </div>
                        </template>
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';
import tableColumns from './AlarmLogTableColumns.js';
import moment from "moment";
export default {
    data() {
        return {
            postData: {
                opera: 'dbalertlist',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid":""
                },
            },
            tableData: [],
            tableColumns: tableColumns,
            timerName: 'AlarmLog',
            timerEventName: 'timerAlarmLog',
            timerInterval: 1000 * 60,
            selectedMonID: {}
        }
    },
    created() {
        bus.$on('selectedMonID', msg => {
            this.selectedMonID = msg;
            this.postData.filters.monid = this.selectedMonID.selectedDBMonID;
            this.getData();
        });
        
        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                this.getData();
            }
        });
        
    },
    mounted() {

    },
    computed: {
        tableDataFn() {
            return this.tableData.filter((item) => {
                switch (item.ALERT_LEVEL) {
                    case 1:
                        item.ALERT_LEVEL = '提醒';
                        item.levelType = 'info';
                        break;
                    case 2:
                        item.ALERT_LEVEL = '普通';
                        item.levelType = 'warning';
                        break;
                    case 3:
                        item.ALERT_LEVEL = '紧急';
                        item.levelType = 'danger';
                        break;
                
                    default:
                        break;
                }

                return item;
            });
        }
    },
    methods: {
        getData(){
            fetchData({
                postData : JSON.stringify(this.postData)
            }).then((res) => {
               
                if(res.data.length>0&&res.data[0].RECORD_TIME==null){
                    res.data[0].RECORD_TIME=moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
                }
                this.tableData = res.data;
               
            });
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
    watch:{
        
    }
}
</script>

<style scoped>
.AlarmLog{
    padding: 0px 5px;
    height: calc(100% - 22px - 8px);
    text-align: center;
    color: aliceblue; 
}
.AlarmLog>>> .el-table--mini, .el-table--small, .el-table__expand-icon{
    background: rgb(2, 16, 51) !important;
}
.AlarmLog>>> .el-table::before{
    height: 0px !important;
}
.AlarmLog>>> .el-table th, .el-table tr{
    background-color: rgb(1, 40, 107);
}
.AlarmLog>>> .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; 
    height: 6px; 
}
.AlarmLog>>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(4, 44, 119, 0.7);
    border-radius: 3px;
}
</style>    